<template>
  <div id="gate-way-milieu">
    <v-header title="网关环境" :showDownloadBtn="false" :saveShow="false"></v-header>
    <div class="main-cont">
      <iToolbar v-on:click="handleToolClick" :buttonsObj="buttonsObj"></iToolbar>
      <div class="content-box">
        <div class="gateway-man">
          <el-table ref="table" :data="tableData" highlight-current-row @current-change="handleSelectionChange"
                    style="width: 100%; padding-left: 10px">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="gwEnvCode" label="环境编号"></el-table-column>
            <el-table-column prop="gwEnvName" label="网关环境名称"></el-table-column>
            <el-table-column prop="gwEnvUrl" label="外部服务地址" show-overflow-tooltip></el-table-column>
            <el-table-column prop="gwEnvAddress" label="网管部署地址" show-overflow-tooltip></el-table-column>
            <el-table-column prop="" label="服务状态" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.gwEnvStatus | capitalize}}
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="openGw(scope.row)">开放</el-button>
                <el-button type="text" size="mini" @click="closeGw(scope.row)">停止</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="total, prev, pager, next"
            :total="pagination">
          </el-pagination>
        </div>
        <div class="tabs">
          <el-tabs v-model="activeName" @tab-click="changeTab">
            <!--<el-tab-pane label="设置网关错误信息" name="second">-->
              <!--<gateway-err-info ref="gwErrChild" :gwInfoForm="currentData" :gwEnvId="gwEnvId"></gateway-err-info>-->
            <!--</el-tab-pane>-->
            <!--<el-tab-pane label="设置网关报文头" name="third">-->
              <!--<gateway-head-conf ref="gwHeadChild"></gateway-head-conf>-->
            <!--</el-tab-pane>-->
            <el-tab-pane label="修改网关环境" name="fourth">
              <modify-gateway-env ref="modifyGwEnvChild"></modify-gateway-env>
            </el-tab-pane>
            <!--<el-tab-pane label="查看网关环境" name="Fifth">-->
              <!--<see-gateway-env ref="seeGwEnv"></see-gateway-env>-->
            <!--</el-tab-pane>-->
            <el-tab-pane label="修改证书" name="Sixth">
              <modify-certificate @refresh="shuaxin" ref="modifyCertiChild"></modify-certificate>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!--新增网关环境弹框-->
    <el-dialog title="新增网关环境" :visible.sync="dialogVisible" width="900px" @close="addGatewayCancel">
      <add-gateway-env @refresh="createGetData" ref="addChild"></add-gateway-env>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../../../api/url'
  import {VHeader} from '../../../../components'
  import seeGatewayEnv from './com/seeGatewayEnv'
  import addGatewayEnv from './com/addGatewayEnv'
  import gatewayErrInfo from './com/gatewayErrInfo'
  import gatewayHeadConf from './com/gatewayHeadCon'
  import modifyCertificate from './com/modifyCertificate'
  import modifyGatewayEnv from './com/modifyGatewayEnv'
  import ajax from '../../../../api/ajax/ajax'
  import iToolbar from '../../../iapadmin/comm/iToolbar/iToolbar'
  export default {
    name: 'gate-way-milieu',
    components: {
      VHeader,
      iToolbar: iToolbar,
      seeGatewayEnv,
      addGatewayEnv,
      gatewayErrInfo,
      gatewayHeadConf,
      modifyCertificate,
      modifyGatewayEnv
    },
    data () {
      return {
        pagination: null,
        tableData: [],
        sizeChangeVal: 10,
        currentVal: 1,
        currentPage: null,
        activeName: 'fourth',
        tabFlag: '',
        view: '',
        gwEnvId: '',
        currentData: {},
        gwzhengshu: {},
        resData: {},
        dialogVisible: false,
        crKey: '',
        buttonsObj: [
          {
            text: '新增',
            oprType: 'addGatewayEnv'
          }
        ]
      }
    },
    watch: {
      activeName: {
        handler: function (val) {
          this.activeName = val
          this.changeTab()
        },
        deep: true
      },
      gwEnvId: {
        handler: function (val) {
          this.gwEnvId = val
          this.changeTab()
        },
        deep: true
      }
    },
    // 过滤器
    filters: {
      capitalize (value) {
        return value === '00' ? '开放服务' : '停止服务'
      }
    },
    methods: {
      clearCheck () {
        this.$refs.modifyGwEnvChild.clearForm()
      },
      // 切换方法
      changeTab () {
        this.clearCheck()
        switch (this.activeName) {
//          case 'second':
//            this.gwErrInfoConfig()
//            break
//          case 'third':
//            this.gwHeadConfig()
//            break
          case 'fourth':
            this.configGwEnv()
            break
          case 'Fifth':
            this.seeGwEnv()
            break
          case 'Sixth':
            this.modifyCer()
            break
          default:
            break
        }
      },
      // 开放
      openGw (data) {
        if (data.gwEnvId) {
          ajax.post(api.OPEN_GW, {gwEnvId: data.gwEnvId}).then(res => {
            if (res === 'success') {
              this.$message({
                type: 'success',
                message: '设置成功'
              })
              this.shuaxin()
            }
          }).catch(err => {
            console.info(err)
          })
        } else {
          this.$message({
            type: 'error',
            message: '请选择一行'
          })
        }
      },
      // 关闭
      closeGw (data) {
        if (data.gwEnvId) {
          ajax.post(api.CLOSE_GW, {gwEnvId: data.gwEnvId}).then(res => {
            if (res === 'success') {
              this.$message({
                type: 'success',
                message: '设置成功'
              })
              this.shuaxin()
            }
          }).catch(err => {
            console.info(err)
          })
        }
      },
      // 新增网关环境后刷新
      shuaxin () {
        this.postAjax(this.allCurrntVal)
      },
      // 不刷新列表刷新
      // notRefreshList (val) {
      //   this.postAjax(this.allCurrntVal, 10, false, val)
      // },
      // 请求数据列表封装
      postAjax (pageNum = 1, pageSize = 10, boolean = true, val) {
        let newUrl = api.LIST_GATEWAY_ENV + '?pageNum=' + pageNum + '&pageSize=' + pageSize
        ajax.post(newUrl).then(res => {
          this.tableData = res.list
          for (let index in this.tableData) {
            if (this.tableData[index].gwGrantFlag === '1') {
              this.tableData[index].gwGrantFlag = true
            } else {
              this.tableData[index].gwGrantFlag = false
            }
          }
          if (boolean) {
            this.$refs.table.setCurrentRow(this.tableData[0])
          }
          // this.activeName = 'second'
          this.pagination = res.total
          this.currentPage = pageNum
        })
      },
      // 分页 改变当前页数
      handleCurrentChange (currentVal) {
        this.allCurrntVal = currentVal
        this.postAjax(currentVal)
      },
      // 获取选中网关环境列表的gwEnvId
      handleSelectionChange (val) {
        if (val) {
          this.currentData = val
          this.gwEnvId = val.gwEnvId
          if (this.activeName === '0') {
            this.activeName = 'second'
          }
        } else {
          this.gwEnvId = ''
        }
      },
      // 请求网关环境列表
      createGetData () {
        // 列表
        this.postAjax()
        // 请求网关证书类型
        ajax.post(api.GW_CER, {pageNum: 1, pageSize: 1}).then(res => {
          this.resData = res
        }).catch(err => {
          console.info(err)
        })
      },
      // 点击"设置网关错误信息"
      gwErrInfoConfig () {
        if (this.gwEnvId) {
          this.$refs.gwErrChild.$emit('getGwErrInfo', {selectData: this.currentData, id: this.gwEnvId})
        }
      },
      // 设置网关报文头
      gwHeadConfig () {
        if (this.gwEnvId) {
          this.$refs.gwHeadChild.$emit('gwHead', {selectData: this.currentData, id: this.gwEnvId})
        }
      },
      // 修改网关环境
      configGwEnv () {
        if (this.gwEnvId) {
          this.$refs.modifyGwEnvChild.$emit('gwEnvmodify', {selectData: this.currentData, id: this.gwEnvId})
        }
      },
      // 查看网关环境
      seeGwEnv () {
        if (this.gwEnvId) {
          this.$refs.seeGwEnv.$emit('seeGwEnvData', {selectData: this.currentData, id: this.gwEnvId})
        }
      },
      // 修改证书
      modifyCer () {
        if (this.gwEnvId) {
          this.$refs.modifyCertiChild.$emit('modifyCerti', {id: this.gwEnvId, selectData: this.currentData, keyIdResDat: this.resData})
        }
      },
      // 新增网关环境按钮
      handleToolClick () {
        let _this = this
        this.dialogVisible = true
        _this.$nextTick(() => {
          _this.$refs.addChild.$emit('getAddIdDat', _this.resData)
        })
      },
      addGatewayCancel () {
        this.dialogVisible = false
        this.$refs.addChild.clearForm()
      }
    },
    created () {
      this.createGetData()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #gate-way-milieu
    height 100%
    .main-cont
      width 100%
      height calc(100% - 56px)
      overflow: auto
      overflow-x hidden
      padding 10px
    .tabs
      margin-top 10px
      .jkInfo
        height 40px
        line-height 40px
      .el-tabs__nav-scroll
        padding-left 20px
    .content-box
      height calc(100% - 78px)
      // overflow-y auto
      margin-top 10px
    .el-dialog__body
      padding 30px 40px 30px 20px
      font-size 14px
</style>
